import React from 'react'
import { StyleSheet, View, StatusBar, } from 'react-native'

// 引入组件
import Video from 'react-native-video';
import Avatar from '../avatar/Avatar';
import RotateAvatar from '../avatar/RotateAvatar'
import HeartBtn from '../button/HeartBtn';
import IconTextButton from '../button/IconTextButton'

// 引入context共享数据组件
import OpenCommentContext from '../../context/OpenCommentContext'

const VideoPlay = () => {
  // 创建共享数据容器
  const openComment = React.useContext(OpenCommentContext)

  return (
    <View style={{ flex: 1 }}>
      <StatusBar
        translucent={true}
        backgroundColor='rgba(0,0,0,0)'
        barStyle='dark-content'
      />
      {/* 视频播放 */}
      <Video
        resizeMode='cover'
        style={styles.video}
        // source={{ uri: 'http://player.alicdn.com/video/aliyunmedia.mp4' }}
        poster="https://img13.360buyimg.com/pop/s1180x940_jfs/t1/117482/30/3189/92139/5ea6a330Ec64df314/c5e28c1feec80256.jpg.webp"
        posterResizeMode="cover"
        controls={true}
        paused={true}
      />
      {/* 图标按钮 */}
      <View style={styles.btns}>
        <View style={styles.btnItem}>
          <Avatar uri="https://img2.woyaogexing.com/2020/05/08/8f4f6158e1864f71a86b303eda8cd416!400x400.jpeg" />
        </View>
        <View style={styles.btnItem}>
          <HeartBtn number='78.3w'/>
        </View>
        <View style={styles.btnItem}>
          <IconTextButton
            name="comment"
            text="9527"
            onPress={() => {
              // 打开评论框
              openComment(true)
            }}
          />
        </View>
        <View style={styles.btnItem}>
          <IconTextButton name="share" text="4545" />
        </View>
        <View style={styles.btnItem}>
          <RotateAvatar uri="https://img2.woyaogexing.com/2020/05/08/8f4f6158e1864f71a86b303eda8cd416!400x400.jpeg"/>
        </View>
      </View>
    </View>
  )
}

export default VideoPlay

const styles = StyleSheet.create({
  video: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  },
  btns: {
    position: 'absolute',
    right: 10,
    bottom: 10,
    alignItems: 'center'
  },
  btnItem: {
    marginTop: 20,
  }
})
